<template>
  <div id="header" class="fixed-header">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
      style="display: flex; justify-content: space-between;">
      <div style="display: flex; align-items: center;">
        <el-menu-item index="1" @click="navigateTo('Home')">首页</el-menu-item>
        <el-sub-menu index="2">
          <template #title>大棚管理</template>
          <el-menu-item index="2-1" @click="navigateTo('Greenhouse')">大棚管理</el-menu-item>
          <el-menu-item index="2-2" @click="navigateTo('Equipment')">设备管理</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="3" @click="navigateTo('Crop')">作物管理</el-menu-item>
        <el-sub-menu index="4">
          <template #title>数据详情</template>
          <el-menu-item index="4-1" @click="navigateTo('Environment')">环境数据</el-menu-item>
          <el-menu-item index="4-2" @click="navigateTo('CropData')">作物数据</el-menu-item>
          <el-menu-item index="4-3" @click="navigateTo('Log')">日志数据</el-menu-item>
          <el-menu-item index="4-4" @click="navigateTo('Alert')">警报数据</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>智慧助手</template>
          <el-menu-item index="5-1" @click="navigateTo('Chat')">聊天助手</el-menu-item>
          <el-menu-item index="5-2" @click="navigateTo('ImageRecognition')">图像识别</el-menu-item>
        </el-sub-menu>
      </div>

      <!-- 登录/用户菜单 -->
      <template v-if="!isLoggedIn">
        <el-menu-item index="6" @click="navigateTo('Login')">登录</el-menu-item>
      </template>
      <template v-else>
        <el-sub-menu index="7" v-if="user">
          <template #title>
            <img src="http://localhost:8004/user/getHeadPortrait" alt="User Avatar"
              style="width: 24px; height: 24px; border-radius: 50%; margin-right: 8px;" />
            {{ user.name }}
          </template>
          <el-menu-item index="7-1" @click="navigateTo('User')">个人信息</el-menu-item>
          <el-menu-item index="7-2" @click="logout">退出</el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';


const store = useStore();
const router = useRouter();

const activeIndex = ref('1');
const isLoggedIn = computed(() => store.getters.isLoggedIn);
const user = computed(() => store.getters.user);
let image = ref('')

const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
};

const navigateTo = (routeName) => {
  router.push({ name: routeName });
};

const logout = () => {
  store.dispatch('logout');
  router.push({ name: 'Login' });
};

watch(isLoggedIn, (newVal) => {
  if (newVal) {
    fetchUserAvatar();
  }
});

watch(user, (newVal) => {
  if (newVal) {
    fetchUserAvatar();
  }
});
</script>

<style lang="scss" scoped>
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #d4f0d4;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#header {
  .el-menu {
    border: none;
    background-color: #d4f0d4;

    .el-menu-item,
    .el-sub-menu,
    .el-sub-menu__title {
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #4caf50;
        transition: width 0.3s ease;
      }

      &.is-active::after {
        width: 100%;
        background-color: #4caf50;
      }

      &:hover::after,
      &.is-opened::after {
        background-color: #8b4513;
        animation: spread 2s forwards;
      }
    }

    .el-sub-menu .el-menu-item {
      color: #333333 !important;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #4caf50;
        transition: width 0.3s ease;
      }

      &.is-active::after {
        width: 100%;
      }

      &:hover::after,
      &.is-opened::after {
        background-color: #8b4513;
        animation: spread 2s forwards;
      }
    }
  }
}

/* 确保页面内容不会被固定头部遮挡 */
.content {
  margin-top: 60px;
  /* 根据固定头部的高度调整 */
}

/* 动画定义 */
@keyframes spread {
  0% {
    left: 50%;
    width: 0;
  }

  100% {
    left: 0;
    width: 100%;
  }
}
</style>